import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, DatePicker, message, Button } from 'antd';
import ScModal from '../../../components/feedback/scModal';
import { statusList } from "../../../fetch/fetchApi";
import GridTable from '../../../components/display/gridTable';
import locale from "antd/lib/date-picker/locale/zh_CN";
import moment from 'moment';
const {MonthPicker} = DatePicker;

let isInitPagination = false;
const defaultDate = moment();
class StatusLog extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            gridData: [],
            pagination: {}
        }

    }

    init() {
        this.query = {
            page: '1',
            pagecount: '10',
            month: defaultDate.format("YYYY-MM")
        };
        this.tableColumns = [
            {
                title: '上报时间',
                dataIndex: 'time',
                key: 'time'
            }, {
                title: '状态码',
                dataIndex: 'status',
                key: 'status',
                className: 'column-nowrap'
            }, {
                title: '状态信息',
                dataIndex: 'statusName',
                key: 'statusName',
            }
        ];
    }

    findStatusList = (params = {}) => {
        this.setState({
            statusLogLoading: true
        })
        statusList(this.query).then((res) => {
            if (!res) {
                return;
            }
            const pagination = this.state.pagination;
            pagination.total = res.data.pageLimit.totalCount;
            pagination.current = params.current || 1;
            if (!isInitPagination) {
                isInitPagination = true;
                pagination.onChange = (page, pageSize) => {
                    this.query["page"] = page;
                    this.query["pagecount"] = pageSize;
                    this.findStatusList({
                        current: page
                    });
                }
            }
            this.setState({
                gridData: res.data.data,
                statusLogLoading: false
            });
        });
    }

    handleChange = (date) => {
        if (!date) {
            this.query.month = null;
            this.setState({
                dateValue: null
            });
            return;
        }
        this.query.month = date.format("YYYY-MM");
        this.setState({
            dateValue: date
        });
    }

    queryHandler = (e) => {
        this.query["page"] = "1";
        this.findStatusList();
    }

    componentDidMount() {
        this.setState({
            dateValue: defaultDate
        })
        this.query["stubId"] = this.props.stubId;
        this.findStatusList();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.stubId !== this.props.stubId) {
            this.query.month = defaultDate.format("YYYY-MM");
            this.query["stubId"] = nextProps.stubId;
            this.query["page"] = 1;
            this.setState({
                dateValue: defaultDate
            })
            this.findStatusList();
        }
    }

    handleOrderDetailModalCancel =() => {
        this.setState({
            orderDetailVisible: false
        })
    }

    render() {
        return (
            <div className="sc-page-content">
                <div className="page-toolbar">
                    <Row gutter={8}>
                        <Col lg={8} xl={8}>
                            <MonthPicker format="YYYY-MM" locale={locale} value={this.state.dateValue} onChange={this.handleChange} />
                        </Col>
                        <div  className="button-inlineBlock">
                            <Button type="primary" onClick={this.queryHandler}>查询</Button>
                        </div>
                    </Row>
                </div>

                <div className="page-panel">
                    <GridTable postyle="table-center" data={this.state.gridData} loading={this.state.statusLogLoading} columns={this.tableColumns} pagination={this.state.pagination}/>
                </div>
            </div>
        )
    }
}
export default StatusLog;
